<template>
	<view>
		<up-swiper :height="300" indicator :list="list1" @click="click" />
		<view class="content">
			<view class="content_icon">
				<image class="icon_img" src="/static/1.png" mode="aspectFill" @click="toPages('/pages/create/textVideo')" />
				<image class="icon_img" src="/static/2.png" mode="aspectFill" @click="toPages('/pages/create/imageVideo')" />
			</view>
			<view class="video_case">
				<view class="video_title">
					<text class="title">文生视频案例</text>
					<view class="title_style" />
				</view>
				<scroll-view class="light" :scroll-x="true">
					<video
						class="video_style"
						v-for="(item, index) in voiceList"
						:key="index"
						:src="item"
						:show-background-playback-button="false"
						play-btn-position="center"
						:show-fullscreen-btn="false"
						show-center-play-btn
						object-fit="fill"
					/>
				</scroll-view>
			</view>
			<view class="video_case">
				<view class="video_title">
					<text class="title">图生视频案例</text>
					<view class="title_style" />
				</view>
				<scroll-view class="light" :scroll-x="true" :scroll-y="false">
					<video
						class="video_style"
						v-for="(item, index) in voiceList"
						:key="index"
						:src="item"
						:show-background-playback-button="false"
						play-btn-position="center"
						:show-fullscreen-btn="false"
						:show-play-btn="false"
						:controls="false"
						object-fit="fill"
					/>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const list1 = reactive<string[]>(['https://www.magicdatatech.cn/themes/v5/assets/images/industry/comment-2.png']);

const voiceList = [
	'https://v1.djyule.com/20250316-324f94/c7f8e87115f4c3c874dc6dc36913bb86.mp4',
	'https://v1.djyule.com/20250319-3b87e9/v20253198112176284.mp4',
	'https://v1.djyule.com/20250319-3b87e9/v20253198112245504.mp4',
	'https://v1.djyule.com/20250319-3b87e9/v20253198111455691.mp4'
];
function click(e: any) {
	console.log(e);
}

function toPages(url: string) {
	uni.navigateTo({ url });
}
</script>

<style scoped lang="scss">
.scroll-view-item_H {
	display: inline-block;
	width: 100%;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}
.content {
	background: linear-gradient(to bottom, #d3eff9, #fff);
	padding: 20rpx;
	box-sizing: border-box;
}
.content_icon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.icon_img {
		height: 220rpx;
	}
}
.video_case {
	margin-top: 20rpx;
	position: relative;
	overflow: hidden;
	background: #ffffff;
	border-radius: 20rpx;
	.video_title {
		display: flex;
		.title {
			width: 70%;
			font-size: 35rpx;
			font-weight: bold;
			padding: 20rpx 20rpx 0 20rpx;
		}
		.title_style {
			width: 30%;
			height: 30px;
			background: #87ceeb;
			position: relative;
		}

		.title_style::after {
			content: '';
			position: absolute;
			top: -8px;
			left: -10rpx;
			width: 70rpx;
			height: 130rpx;
			background-color: #ffffff;
			border-radius: 50%;
			box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
		}
	}
	.light {
		width: 100%;
		height: 150px;
		padding: 20rpx 0;
		display: inline-block;
		white-space: nowrap;
		.video_style {
			width: 200rpx;
			height: 150px;
			margin: 0 20rpx;
			border-radius: 20rpx;
		}
	}
}
</style>
